-<template>
  <view>
    <view class="content">
      <view class="address">
        <view class="cell-item-box">
          <view class="u-flex">
            <view class="cell border-bottom u-m-r-16 u-flex-2">
              <view class="cell__title"><u-input v-model="name" placeholder="姓名" class="cell__input" /></view>
              <view class="cell__value"></view>
              <view class="cell__icon-wrap"></view>
            </view>
            <view class="cell border-bottom u-m-l-16 u-flex-3">
              <view class="cell__title"><u-input v-model="phone" placeholder="电话" class="cell__input" /></view>
              <view class="cell__value"></view>
              <view class="cell__icon-wrap"></view>
            </view>
          </view>
          <view class="cell border-bottom">
            <view class="cell__title"></view>
            <view class="cell__value" @click="show = true">
              <u-input v-model="area" placeholder="地区" class="cell__input disabled" />
              <u-picker v-model="show" mode="region" @confirm="AreaConfirm"></u-picker>
            </view>
            <view class="cell__icon-wrap"><u-icon name="arrow-right" color="#999" size="28"></u-icon></view>
          </view>
          <view class="cell border-bottom">
            <view class="cell__title"></view>
            <view class="cell__value"><u-input v-model="address" placeholder="详细地址" class="cell__input" /></view>
            <view class="cell__icon-wrap"><!-- <u-icon name="arrow-right" color="#999" size="28"></u-icon> --></view>
          </view>
          <view class="cell border-bottom">
            <view class="cell__title"></view>
            <view class="cell__value"><u-input v-model="company" placeholder="公司名称 (选填)" class="cell__input" /></view>
            <view class="cell__icon-wrap"></view>
          </view>
          <view class="cell border-bottom">
            <view class="cell__title">
              <u-checkbox
                @change="checkboxChange"
                v-model="isDefault"
                active-color="#fed500" 
                shape="circle"
                size="30"
                style="display: block !important;">
               </u-checkbox>
              </view>
            <view class="cell__value">设置默认地址</view>
            <view class="cell__icon-wrap"></view>
          </view>
        </view>
      </view>
      <view class="address_history">历史地址</view>
      <view class="address">
        <view class="list" v-for="(item,index) in 3" :key="index">
          <view class="list-item border-bottom">
            <view class="list-item__container container--right">
              <view class="list-item__content">
                <view class="u-flex">
                  <text class="list-item__content-title">{{name}}</text>
                  <text class="list-item__content-phone">{{phone}}</text>
                </view>
                <text class="list-item__content-note">汕头市金平区新兴街10号15栋1座302</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 120rpx;"></view>
    <view class="s-btn s-btn--primary s-size-default" @click="confirm">确定</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show:false,
        name:'郑生',
        phone:'13580220654',
        area:'广东省 汕头市 金平区',
        address:'新兴街10号15栋1座302',
        company:'',
        isDefault:true,
      }
    },
    mounted() {
    
    },
    onLoad(options) {
      
    },
    methods: {
      AreaConfirm(e){
        this.area = e.province.label+' '+e.city.label+' '+e.area.label
      },
      checkboxChange(e){
        console.log(e);
      },
      confirm(){
        uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
            delta: 1
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 100%;
  }
  .disabled{
    pointer-events: none;
  }
  .content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    .address_history{
      font-size: 32rpx;
      font-weight: 600;
      padding: 16rpx 32rpx;
    }
    .address{
      padding: 0 32rpx;
      margin:20rpx;
      background-color: #fff;
      border-radius: 28rpx;
      .cell-item-box{
        background-color: #fff;
        .cell{
          display: flex;
          flex-direction: row;
          align-items: center;
          position: relative;
          box-sizing: border-box;
          width: 100%;
          padding: 24rpx 0;
          line-height: 27px;
          background-color: #fff;
          text-align: left;
          .cell__input{
            font-weight: 600;
          }
          .cell__title{
            font-size: 28rpx;
            width: auto;
          }
          .cell__value{
            overflow: hidden;
            vertical-align: middle;
            flex: 1;
            font-size: 28rpx;
            .cell__value-icon{
              font-size: 48rpx;
              color: #303133;
            }
          }
          .cell__icon-wrap{
            margin-left: 10rpx;
          }
        }
      }
      .list{
        background-color: #fff;
        border-radius: 28rpx;
        .list-item{
          display: flex;
          font-size: 32rpx;
          position: relative;
          justify-content: space-between;
          align-items: center;
          flex-direction: row;
          cursor: pointer;
          padding:32rpx 0;
          .list-item__container{
            position: relative;
            display: flex;
            flex-direction: row;
            flex: 1;
            overflow: hidden;
            .list-item__content{
              display: flex;
              padding-right: 16rpx;
              flex: 1;
              flex-direction: column;
              justify-content: space-between;
              overflow: hidden;
              .list-item__content-title{
                font-size: 30rpx;
                overflow: hidden;
                font-weight: 600;
              }
              .list-item__content-phone{
                font-size: 24rpx;
                overflow: hidden;
                color: #717c82;
                margin-left: 16rpx;
              }
              .list-item__content-note{
                margin-top: 16rpx;
                font-size: 28rpx;
                overflow: hidden;
                color: #717c82;
              } 
            }
            .list-item__content--center{
              justify-content: center;
            }
            .list-item__extra{
              display: flex;
              flex-direction: row;
              justify-content: flex-end;
              align-items: center;
              .list-item__extra-text{
                color: #999;
                font-size: 24rpx;
              }
            }
          }
        }
      }
      .border-bottom::after{
          content: " ";
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
          box-sizing: border-box;
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
          width: 199.8%;
          height: 199.7%;
          -webkit-transform: scale(.5);
          transform: scale(.5);
          border: 0 solid #e4e7ed;
          z-index: 2;
      }
      .border-bottom::after {
        border-bottom-width: 2rpx;
      }
    }
  }
  
</style>